<template>
  <div class="search-content">
    <el-form :inline="true" ref="ruleFormRef" :model="ruleForm">
      <el-form-item
        v-for="item in filterOptions"
        :key="item"
        :label="item.label"
        :prop="item.prop"
      >
        <el-select v-if="item.type === 'select'">
          <el-option
            v-for="i in item.options"
            :key="i.value"
            :label="i.label"
            :value="i.value"
          ></el-option>
        </el-select>
        <el-date-picker
          v-if="item.type === 'datetimerange'"
          type="datetimerange"
        ></el-date-picker>
        <el-input v-if="!item.type"></el-input>
      </el-form-item>
    </el-form>
    <el-button type="primary">搜索</el-button>
    <el-button>重置</el-button>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref, reactive, onMounted } from "vue";
import type { FormInstance } from "element-plus";
const props = defineProps({
  options: Array,
});
const filterOptions = props.options?.filter(
  (item: any) => item.isSearch == true
);

const ruleFormRef = ref<FormInstance>();
let ruleForm = reactive({});

onMounted(() => {
  filterOptions?.forEach((item) => {
    ruleForm[item.prop] = "";
  });
  console.log("111111111111111111", ruleForm);
});
</script>

<style scoped lang="scss">
.search-content {
  display: flex;
}
</style>
